<!-- 电表详情 -->
<template>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from 'echarts'
import {AjaxCommon, md5} from '@/libs/apiCommon'
import {getToken} from '@/libs/util'
import {Utility} from '@/libs/utility'
import moment from 'moment'
export default {
    name: 'monthEcharts',
    components: {},
    props: ['dir', 'deviceInfo', 'dateValue'],
    data() {
        return {
            myChart: null,
            xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //横坐标
            yData: [23, 24, 18, 25, 27, 28, 25], //数据
            myChartStyle: {float: 'left', width: '100%', height: '280px'} //图表样式
        }
    },
    computed: {
        cDir() {
            return this.dir
        }
    },
    watch: {
        cDir() {
            this.myChart.resize()
        },
        deviceInfo: {
            handler(di) {
                if (di) {
                    this.getData()
                }
            },
            deep: true,
            immediate: false
        },
        dateValue: {
            handler(di) {
                if (di) {
                    this.getData(di)
                }
            },
            deep: true,
            immediate: false
        }
    },
    created() {},
    mounted() {
        this.getData()
    },
    methods: {
        getData(value) {
            const deviceInfo = this.deviceInfo
            let dateTime = Utility.getCurrentTime()
            if (value) {
                dateTime = value
            }
            const id = deviceInfo?.eq_guid ? deviceInfo.eq_guid : deviceInfo.id
            /// day_type 查询类型 天 为 d  月为m  年为y 小时为h   72小时为 72h
            // index_type 时间类型，默认0为小时数据，1为时段数据（如上午班、下午班、夜间等）
            // A_frequency : 数据采集频率，默认60分钟，可选15分钟，目前只有15和60
            const params = `/api/EqMonitor/EQ_Day_Out?EqGuid=${id}&CalDATE=${dateTime}&day_type=m&index_type=0&A_frequency=60`
            AjaxCommon(params, 'get', null, true, id).then((res) => {
                const data = res.data.Message
                this.initEcharts(data)
            })
        },
        initEcharts(data) {
            let xData = []
            let yData = []
            data?.map((t) => {
                xData.push(t.name + '日')
                yData.push(t.value)
            })
            this.xData = xData
            this.yData = yData
            // 基本柱状图
            const option = {
                title: {
                    text: '',
                    subtext: '                  kWh'
                },
                xAxis: {
                    data: this.xData,
                    axisLabel: {
                        // interval: 0
                        // rotate: 30
                    }
                },
                grid: {
                    top: '15%',
                    bottom: '28%',
                    left: '5%',
                    right: '1%'
                },
                yAxis: {},
                tooltip: {
                    // Tooltip在echarts范围内
                    confine: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[0]
                        return tar.name + ' : ' + tar.value + 'kWh'
                        // return tar.name + "<br/>" + tar.seriesName + " : " + tar.value
                    }
                },
                series: [
                    {
                        type: 'bar', //形状为柱状图
                        data: this.yData,
                        itemStyle: {
                            color: '#2680FB'
                        }
                    }
                ]
            }
            const myChart = echarts.init(document.getElementById('mychart'))
            myChart.setOption(option)
            this.myChart = myChart
            myChart.resize()
        }
    }
}
</script>

<style scoped></style>
